//导入react和react-dom
// react负责创建元素-虚拟的Dom
import React from 'react';
// reactDOM负责渲染react元素
import ReactDOM from 'react-dom';

// React中JSX-插值表达式
// 变量也能作为表达式
// 基础类型：string、number boolean null undefined
// 引用类型：数组、对象、函数

const obj = {
  name: 'Lz',
};

function getName(obj) {
  return obj.name;
}

const ulnode = (
  <ul>
    <li>11</li>
    <li>11</li>
    <li>33</li>
  </ul>
);

const isShow = true;

const list = (
  <div>
    {/* 函数本身也是一种对象 */}
    {/* 函数的调用可以放入插值表达式 */}
    {/* 函数返回的同样不能是对戏是对象 */}
    {getName(obj)}
    {/* 三元表达式 */}
    <h1>{isShow ? '显示' : '隐藏'}</h1>
    {/* 逻辑运算符 */}
    <h1>{isShow && '显示'}</h1>
    {/* JSX本身也是表达式 */}
    <h1>{ulnode}</h1>
  </div>
);

// 渲染元素到页面
// 语法：ReactDOM.render（react元素，真实的dom作为挂载点）
ReactDOM.render(list, document.getElementById('root'));
